<template>
    <div>
        <!-- 上标签 -->
        <div class="shang">
            <van-nav-bar left-arrow>
                <template #left>
                    <van-icon name="add" size="25" color="#FB554C" is-link @click="fabu_dain()" />
                </template>
                <template #title>
                    <!-- @click="search_dian()" -->
                    <van-search style="height: 46px;" v-model="value" shape="round" @click="search_dian()" disabled
                        placeholder="请输入搜索关键词" />
                </template>
                <template #right>
                    <van-icon name="chat-o" size="25" color="#B4B4B4" @click="xiaoxi_dain()" />
                </template>
            </van-nav-bar>
        </div>
        <!-- 轮播图  -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>
                <!-- style="height: 375px;width: 1200px;" -->
                <img style="height: 168px;width: 100%;" src="../components/lgh/myimg/lun_1.png">
            </van-swipe-item>
            <van-swipe-item>
                <img style="height: 168px;width: 100%;" src="../components/lgh/myimg/lun_2.png">
            </van-swipe-item>
            <van-swipe-item>
                <img style="height: 168px;width: 100%;" src="../components/lgh/myimg/lun_3.png">
            </van-swipe-item>
            <van-swipe-item>
                <img style="height: 168px;width: 100%;" src="../components/lgh/myimg/lun_4.png">
            </van-swipe-item>
        </van-swipe>
        <!-- 下标签 -->
        <van-tabs v-model:active="active" swipeable>
            <van-tab v-for="item in xiabiaoqian" :title="item">

                <div class="main_one" v-if="item == '图文'">
                    <!-- 我是图文 -->
                    <div style=" column-count: 2;-moz-column-count: 2;-webkit-column-count: 2;">
                        <div class="one" v-for="(value, index) in tuwen_list">
                            <img style="width: 100%;" :src="value.path">
                            <div style="display: flex; justify-content: center;align-items: center;">
                                <span>
                                    {{value.title}}
                                </span>
                            </div>

                        </div>
                    </div>
                </div>

                <!-- <div v-if="item == '视频'">
                    我是视频
                </div>
                <div v-if="item == '集市'">
                    我是集市
                </div> -->
            </van-tab>
        </van-tabs>
        <!-- 模态框 -->
        <van-popup v-model:show="show" position="bottom" :style="{ height: '30%' }">
            <div class="motai">
                <div class="mo_one" @click="motai_dian(index)" v-for="(item,index) in motai_list" :key="index">
                    <img style="width: 50%;" :src="item.path">
                    <div><span>{{item.content}}</span></div>
                </div>
            </div>
            <div @click="close_motai()"
                style="position: absolute;width: 100vw; bottom: 0vh;display: flex;justify-content: center;margin-bottom: 20px;">
                <van-icon name="cross" />
            </div>

        </van-popup>
    </div>
</template>
    
<script setup lang='ts'>

import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

const value = ref('');
//上标签的三部分点击事件
function search_dian() {
    console.log("11111");

}
function fabu_dain() {
    showPopup()
}
function xiaoxi_dain() {
    console.log("33333");
}

//下标签
const active = ref(0);
const xiabiaoqian = [
    '图文',
    '视频',
    '集市'
]

//图文数据
var tuwen_list = [
    {
        path: new URL(`../components/lgh/myimg/01.png`, import.meta.url).href,
        title: '这是第一个测试'
    },
    {
        path: new URL(`../components/lgh/myimg/02.png`, import.meta.url).href,
        title: '这是第二个测试'
    },
    {
        path: new URL(`../components/lgh/myimg/02.png`, import.meta.url).href,
        title: '这是第二个测试'
    },
    {
        path: new URL(`../components/lgh/myimg/01.png`, import.meta.url).href,
        title: '这是第一个测试'
    },
]



//模态框
const show = ref(false);
const showPopup = () => {
    show.value = true;
};
const close_motai = () => {
    show.value = false;
}
//模态框数据
const motai_list = [
    {
        path: new URL(`../components/lgh/icon/wenzhang.png`, import.meta.url).href,
        content: '发文章'
    },
    {
        path: new URL(`../components/lgh/icon/jiaocheng.png`, import.meta.url).href,
        content: '发教程'
    },
    {
        path: new URL(`../components/lgh/icon/caogao.png`, import.meta.url).href,
        content: '草稿箱'
    },
]
//模态框的点击事件
function motai_dian(index: any) {
    if (index == 0) {
        // console.log("0000");
        router.push({
            name: 'fawen',
        })

    } else if (index == 1) {
        router.push({
            name: 'fajiaocheng'
        })
        // console.log("1111");

    } else if (index == 2) {
        router.push({
            name: 'caogao'
        })
    }


}




</script>
    
<style scoped>
.my-swipe .van-swipe-item {
    margin-top: 5px;
}

.main_one {
    /* padding: 5px; */
    margin-top: 1%;
    margin-bottom: 1%;
    margin-left: 4%;
    width: 92vw;
    /* background-color: red; */
    height: 51vh;
    overflow-y: scroll;
    background-color: rgb(243, 243, 243);
    /* overflow: scroll; */
}

.one {
    border: 1px solid red;
    /* padding: 10px; */
    background-color: white;

}

.motai {
    display: flex;
    padding-top: 5px;
}

.mo_one {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
</style>